<template>
  <a-modal
    title="选择审批人员"
    :visible="visible"
    :closable="false"
    centered
    @ok="handleOk"
    @cancel="handleCancel"
    :width="winWidth+'px'"
  >
    <div :style="{width: '100%',height: winHeight+'px'}">
      <a-form-model>
        <a-row :gutter="24">
          <a-col :span="24" v-for="(col,indexs) in columns" :key="indexs">
            <a-form-model-item
              :required="col.required"
              :label="col.label"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15 }"
            >
              <a-radio-group v-if="col.type&&col.type==='radio'" v-model="col.username" :disabled="col.disabled" @change="(event)=>radioGroupChange(event,indexs)">
                <a-radio
                  v-for="(item1) in col.options"
                  :key="item1.value"
                  :value="item1.value"
                >
                  {{ item1.label }}
                </a-radio>
              </a-radio-group>
              <a-textarea v-else-if="col.type&&col.type==='textarea'" :disabled="col.disabled" readOnly :placeholder="col.placeholder&&col.placeholder!==''?col.placeholder:'点击选择'" v-model="col.realname" @click="selectUser(col)"/>
              <a-input  v-else :disabled="col.disabled" readOnly :placeholder="col.placeholder&&col.placeholder!==''?col.placeholder:'点击选择'" :title="col.placeholder&&col.placeholder!==''?col.placeholder:'点击选择'" v-model="col.realname" @click="selectUser(col)" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <span style="color:red;">{{ tip }}</span>
          </a-col>
        </a-row>
      </a-form-model>
      <user-select ref="userSelect" @setResult="setResult" :origin-target-keys="originTargetKeys" :params="paramsSelf" :limit="currLimit" :required="required"/>
    </div>
  </a-modal>
</template>
<script>
import { strNotNull } from '@/utils/common.js'
export default {
  components: {
    UserSelect: () => import('@/components/tools/UserSelect'),
  },
  name: 'ProcessUserSelect',
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    targetKeys: {
      type: Array,
      default: () => [],
    },
    params:{
          Type: Object,
          default: ()=>{return {}},
          require:false
    },
    winWidth: {
      type: Number,
      default: 600
    },
    winHeight: {
      type: Number,
      default: 500
    },
    tip:{
      type: String,
      default: '',
      required:false
    }
  },
  data() {
    return {
      visible: false,
      currLimit: 0,
      currSel: {},
      originTargetKeys:[],
      paramsSelf: {},
      required: false
    }
  },
  mounted() {
    this.originTargetKeys = this.targetKeys
  },
  watch: {
    targetKeys(newValue, oldValue) {
      console.log('watch')
      this.originTargetKeys = newValue
    }
  },
  methods: {
    setResult(result) {
      var usernames = []
      var realnames = []
      if (result != null) {
        result.forEach((item) => {
          usernames.push(item.username)
          realnames.push(item.realname)
        })
      }
      this.currSel.username = usernames.join(',')
      this.currSel.realname = realnames.join(',')
    },
    selectUser(col) {
      this.currSel = col
      if(col.limit!=null && col.limit>0){
        this.currLimit = col.limit
      }else{
        this.currLimit = 0
      }
      this.originTargetKeys = strNotNull(col.username) ? col.username.split(',') : (this.originTargetKeys ? this.originTargetKeys: [])
      // console.log('pro')
      // console.log(col.username)
      // console.log(this.originTargetKeys)
      if (col.maType) {
        this.paramsSelf = this.params
      } else {
        this.paramsSelf = {}
        this.originTargetKeys = strNotNull(col.username) ? col.username.split(',') : []
      }
      this.required = col.required
      this.$refs.userSelect.doSelect()
    },
    doSelect() {
      this.visible = true
    },
    handleOk() {
      var flag = true
      for(var i=0;i<this.columns.length;i++){
        var col=this.columns[i]
        if (col.required && (!strNotNull(col.username) || !strNotNull(col.realname))) {
          this.$message.warning('岗位[' + col.label + ']为必选项，请选择相应审核人员', 2)
          flag = false
          break;
        }
      }
      if (flag) {
        this.visible = false
        this.$emit('selectUserConfirm', this.columns)
      }
    },
    handleCancel() {
      this.columns.forEach((col) => {
        col.username = ''
        col.realname = ''
      })
      console.log(this.columns);
      this.visible = false
      this.$emit('selectUserConfirm', null)
    },
    radioGroupChange(event,indexs){
      let col=this.columns[indexs];
      col.username=event.target.value;
      col.realname=event.target.value;
    }
  },
}
</script>
<style lang="less" scoped>
/deep/ .ant-transfer-list .ant-btn-primary {
  color: #bbb;
}
/deep/ .ant-transfer-list:first-of-type .ant-transfer-list-header-selected {
  display: none;
}
/deep/ .ant-modal-content {
  border-radius: 15px;
}
/deep/ .ant-modal-title,
/deep/ .ant-modal-footer {
  text-align: center;
}
/deep/ .ant-transfer-operation .ant-btn-primary {
  background-color: #f5f5f5 !important;
}
/deep/ .ant-modal-header {
  border-radius: 15px 15px 0 0;
  background-image: linear-gradient(90deg, #15b1ff 0%, #1158c9 100%);
}
/deep/ .ant-modal-title {
  color: #fff;
}
/deep/ .ant-form-item-label{
  overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
/deep/ .ant-form .ant-form-item:not(.self-form-item) .ant-form-item-label {width: 125px;}
</style>